<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <search @sumbit='sumbit'>
        <!--  搜索项 -->
        <template slot='form'>
          <el-form :inline='true'
                   @submit.native.prevent
                   :model='dataForm'
                   ref='dataForm'>
            <el-form-item>
              <el-select v-model="dataForm.subsystem"
                         clearable
                         placeholder="请选择子系统">
                <el-option v-for="item in currentAppMenu"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.deviceType"
                         clearable
                         placeholder="设备类型">
                <el-option v-for="item in $store.state.EquTypeList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop='deviceId'>
              <el-input v-model.trim='dataForm.deviceId'
                        class='form-item'
                        clearable
                        placeholder='请输入设备ID'></el-input>
            </el-form-item>
            <el-form-item prop='name'>
              <el-input v-model='dataForm.name'
                        class='form-item'
                        clearable
                        placeholder='请输入设备名称'></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.aid"
                         clearable
                         filterable
                         placeholder="所在位置">
                <el-option v-for="item in anameList"
                           :key="item.id"
                           :label="item.allName"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.type"
                         clearable
                         placeholder="产品类型">
                <el-option v-for="item in productTypeList"
                           :key="item.dictValue"
                           :label="item.dictName"
                           :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="false">
              <el-select v-model="dataForm.status"
                         clearable
                         placeholder="启用/禁用">
                <el-option v-for="item in statusList"
                           :key="item.dictValue"
                           :label="item.dictName"
                           :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
        <!--  操作按钮 -->
        <template slot='btns'>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('tb:device:insertDevice')"
                     @click="addWin5()">新增非物联设备</el-button>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('tb:device:insertDevice')"
                     @click="addWin()">新增物联设备</el-button>
        </template>
      </search>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
        <template slot="model-after">
          <el-table-column prop="deviceType"
                           align="center"
                           label="设备类型"
                           show-overflow-tooltip
                           min-width="100">
            <template slot-scope="scope">
              <span>{{ $store.state.EquTypeList.find(item => item.id === scope.row.deviceType).name }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="type"
                         label="产品类型"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">网关设备</span>
            <span v-else-if="scope.row.type === 2">网关子设备</span>
            <span v-else-if="scope.row.type === 3">直连设备</span>
            <span v-else>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subsystem"
                         label="所属系统"
                         min-width="120"
                         show-overflow-tooltip
                         align="center">
          <template slot-scope="scope">
            <span>{{ subsystemToString(scope.row.subsystem) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         label="在线/离线"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status === 0 ? 'success' : ''">
              {{ scope.row.status === 0 ? '在线' : '离线' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="iot"
                         label="是否物联"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.iot === 0">否</span>
            <span v-if="scope.row.iot === 1">是</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align='center'
                         align='center'
                         width='300'>
          <template slot-scope='scope'>
            <el-button type='text'
                       class='brand'
                       v-if="$hasPermission('tb:device:deviceStatus') && false"
                       @click='setStatus1(scope.row.id)'
                       size='small'>{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-button>
            <el-button type='text'
                       class='brand'
                       @click="openDialog('EquAccountinfo', scope.row)"
                       size='small'>详情</el-button>
            <!-- 非物联 -->
            <el-button type='text'
                       class='brand'
                       v-if="$hasPermission('tb:device:updateDevice') && scope.row.iot === 0"
                       @click='addWin5(scope.row)'
                       size='small'>修改</el-button>
            <!-- 物联 -->
            <el-button type='text'
                       class='brand'
                       v-if="$hasPermission('tb:device:updateDevice') && scope.row.iot === 1"
                       @click='addWin(scope.row)'
                       size='small'>修改</el-button>
            <el-button type='text'
                       class='brand'
                       v-if="$hasPermission('tb:device:updateDevice')"
                       @click='openDownloadQR(scope.row)'
                       size='small'>下载二维码</el-button>
            <el-button type='text'
                       v-if="scope.row.dockingMethod === 2"
                       class='brand'
                       @click='addWin6(scope.row)'
                       size='small'>物联信息</el-button>
            <el-button type='text'
                       class='brand'
                       v-else-if="(scope.row.deviceType === 6 || scope.row.deviceType === 7) && !scope.row.platfor && scope.row.iot === 1"
                       @click='addWin1(scope.row)'
                       size='small'>物联信息</el-button>
            <el-button type='text'
                       v-else-if="(scope.row.deviceType === 1 || scope.row.deviceType === 2 || scope.row.deviceType === 3) && !scope.row.platform && scope.row.iot === 1"
                       class='brand'
                       @click='addWin2(scope.row)'
                       size='small'>物联信息</el-button>
            <el-button type='text'
                       v-else-if="scope.row.deviceType === 8 && !scope.row.platform && scope.row.iot === 1"
                       class='brand'
                       @click='addWin4(scope.row, 1)'
                       size='small'>物联信息</el-button>
            <el-button type='text'
                       v-else-if="scope.row.deviceType === 9 && !scope.row.platform && scope.row.iot === 1"
                       class='brand'
                       @click='addWin4(scope.row, 2)'
                       size='small'>物联信息</el-button>
            <el-button type='text'
                       class='brand'
                       v-if="scope.row.dockingMethod === 2"
                       @click='addWin33(scope.row)'
                       size='small'>记录</el-button>
            <el-button type='text'
                       class='brand'
                       v-if="(scope.row.deviceType === 1 || scope.row.deviceType === 2 || scope.row.deviceType === 3) && false"
                       @click='addWin3(scope.row)'
                       size='small'>设备记录</el-button>
            <el-button type='text'
                       size='small'
                       class='danger'
                       v-if="$hasPermission('tb:device:deleteDevice')"
                       @click='deleteHandle({ id: scope.row.id })'>{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10, 20, 50, 100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
    </div>
    <EquAccountaddorupdate ref="addOrUpdate"
                           @callBack="getDataList" />
    <EquAccountinfo ref="EquAccountinfo"
                    @callBack="getDataList" />
    <EquAccountattr ref="EquAccountattr"
                    @callBack="getDataList" />
    <ITOGateway ref="ITOGateway"
                @callBack="getDataList" />
    <GatewayPassthrough ref="GatewayPassthrough"
                        @callBack="getDataList" />
    <ITOMeter ref="ITOMeter"
              @callBack="getDataList" />
    <ITOCamera ref="ITOCamera"
               @callBack="getDataList" />
    <EquAccountrecord ref="EquAccountrecord"
                      @callBack="getDataList" />
    <EquAccountrecord1 ref="EquAccountrecord1"
                       @callBack="getDataList" />
    <EquListaddorupdate ref="EquListaddorupdate"
                        @callBack="getDataList" />
    <downloadQR ref="downloadQR"
                @callBack="getDataList" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import EquAccountaddorupdate from './EquAccount-add-or-update.vue'
import EquAccountinfo from './EquAccount-info.vue'
import EquAccountattr from './EquAccount-attr.vue'
import EquTemplate from '../EquTemplate/EquTemplate.vue'
import ITOGateway from './ITO/ITOGateway.vue'
import GatewayPassthrough from './ITO/Gateway-passthrough.vue'
import ITOMeter from './ITO/ITOMeter.vue'
import EquAccountrecord from './EquAccount-record.vue'
import EquAccountrecord1 from './EquAccount-record1.vue'
import ITOCamera from './ITO/ITOCamera.vue'
import EquListaddorupdate from './EquList-add-or-update.vue'
import downloadQR from './downloadQR'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/device/pageDevice', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        updateStatusURL: '/tb/device/deviceStatus',
        deleteURL: '/tb/device/deleteDevice', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      dataForm: {
        subsystem: '',
        id: '',
        name: '',
        aid: '',
        type: '',
        status: ''
      },
      anameList: {}, // 所在位置
      productTypeList: [{ // 产品类型
        dictValue: 1,
        dictName: '网关设备'
      }, {
        dictValue: 2,
        dictName: '网关子设备'
      }, {
        dictValue: 3,
        dictName: '直连设备'
      }],
      statusList: [{ dictValue: 0, dictName: '启用' }, { dictValue: 1, dictName: '禁用' }],
      currentAppMenu: [
        { id: 4, name: '会务管理系统' },
        { id: 1, name: '宿舍管理系统' },
        { id: 7, name: '访客管理系统' },
        { id: 2, name: '智慧路灯系统' },
        { id: 3, name: '信息发布系统' },
        { id: 5, name: '餐饮管理系统' },
        { id: 6, name: '能耗管理系统' },
        { id: 0, name: '集成管理系统' },
        { id: 8, name: '视频监控系统' },
        { id: 9, name: '健身房管理系统' },
        { id: 10, name: '门禁管理系统' }],
      dataList: []
    }
  },
  components: { tableTemplate, Search, EquAccountrecord, EquAccountrecord1, ITOCamera, ITOMeter, ITOGateway, GatewayPassthrough, EquAccountaddorupdate, EquAccountinfo, EquAccountattr, EquTemplate, EquListaddorupdate, downloadQR },
  computed: {
    tableData () {
      return [
        { label: '设备ID', width: '150', prop: 'deviceId' },
        { label: '设备名称', width: '120', prop: 'name' },
        { label: '设备型号', width: '100', prop: 'model' },
        { label: '所在位置', width: '120', prop: 'areaName' }
      ]
    }
  },
  mounted () {
    this.$http.get('tb/area/allNameList').then(({ data: res }) => {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.anameList = res.data
    })
  },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    // subsystemToString (val) {
    //   let str = ''
    //   if (val) {
    //     let arr = val.split(',')
    //     if (arr.length === 1) {
    //       str = this.currentAppMenu.findIndex((item1) => item1.id === Number(arr)) !== -1 ? this.currentAppMenu[this.currentAppMenu.findIndex((item1) => item1.id === Number(arr))].name : ''
    //     } else {
    //       arr.forEach((item, index) => {
    //         if (this.currentAppMenu.findIndex((item1) => item1.id === Number(item)) !== -1) {
    //           if (index === 0) {
    //             str = this.currentAppMenu[this.currentAppMenu.findIndex((item1) => item1.id === Number(item))].name
    //           } else {
    //             str += ',' + this.currentAppMenu[this.currentAppMenu.findIndex((item1) => item1.id === Number(item))].name
    //           }
    //         }
    //       })
    //     }
    //   }
    //   return str
    // },
    subsystemToString (val) {
      let str = ''
      if (val) {
        const arr = typeof val === 'string' ? val.split(',') : val
        const appMenuMap = new Map(this.currentAppMenu.map(item => [item.id, item.name]))
        str = arr.reduce((res, cur) => {
          if (appMenuMap.has(Number(cur))) {
            if (res.length > 0) {
              res += ','
            }
            res += appMenuMap.get(Number(cur))
          }
          return res
        }, '')
      }
      return str
    },
    addWin (_id) {
      if (_id) {
        this.$refs.addOrUpdate.init(_id)
      } else {
        this.$refs.addOrUpdate.init()
      }
    },
    addWin1 (_id) {
      if (_id) {
        this.$refs.ITOGateway.init(_id)
      } else {
        this.$refs.ITOGateway.init()
      }
    },
    addWin2 (_id) {
      if (_id) {
        this.$refs.ITOMeter.init(_id)
      } else {
        this.$refs.ITOMeter.init()
      }
    },
    addWin3 (_id) {
      if (_id) {
        this.$refs.EquAccountrecord.init(_id)
      } else {
        this.$refs.EquAccountrecord.init()
      }
    },
    addWin33 (data) {
      this.$refs.EquAccountrecord1.init(data)
    },
    /**
     * @param _id {string} 当前行所有数据
     * @param _type {number} 子页面判断依据 1:摄像头 2:音频
     */
    addWin4 (_id, _type) {
      if (_id) {
        if (_type) {
          this.$refs.ITOCamera.init(_id, _type)
        } else {
          this.$refs.ITOCamera.init(_id, null)
        }
      } else {
        this.$refs.ITOCamera.init(null, _type)
      }
    },
    addWin5 (_id) {
      if (_id) {
        this.$refs.EquListaddorupdate.init(_id)
      } else {
        this.$refs.EquListaddorupdate.init()
      }
    },
    addWin6 (_id) {
      if (_id) {
        this.$refs.GatewayPassthrough.init(_id)
      } else {
        this.$refs.GatewayPassthrough.init()
      }
    },
    openDownloadQR (_id) {
      this.$refs.downloadQR.init(_id)
    },
    openEquAccountinfo (_id) {
      this.$refs.EquAccountinfo.dataForm.id = _id
      this.$refs.EquAccountinfo.init()
    },
    setStatus1 (_id) {
      this.$http.put('/tb/device/deviceStatus', [_id]).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getPageInit()
      })
    },
    openEquTemplate () {
      this.$router.push({ name: 'EquTemplate-EquTemplate' })
    }
  }
}
</script>
<style lang="scss" scoped></style>
